<template>
<view class='page-container'>
	<FilterButton 
		:is-record="isRecord"
		:active-date="activeDate"
		:selected-time-range="selectedTimeRange"
		@update:activeDate="handleChangeFilterBtn"
		@time-range-selected="handleChangeTimeRange"
	></FilterButton>
	<PECard
		v-for="(infos, idx) in filteredInfo"
		:key="idx"
		:set-meal-info="infos"
	></PECard>
</view>
</template>

<script>
import FilterButton from '../../../components/FilterButton/FilterButton.vue'
import PECard from '../../../components/PhysicalExaminationCard/PhysicalExaminationCard.vue';
export default {
	components: {
		FilterButton,
		PECard
	},
	data(){
		return {
			activeDate:'1m',
			selectedTimeRange:'请选择时间范围',
			isRecord: true,
			setMealInfo:[
				{
					imgPath: '',
					title: '一般体检',
					status: 0,
					label: ['男', '入职体检', '腹部'],
					lineBtnText: '立即预约',
					coverBtnText: '查看详情',
					time: '2025-7-29',
				},
				{
					imgPath: '',
					title: '一般体检',
					status: 0,
					label: ['男', '入职体检', '腹部'],
					lineBtnText: '立即预约',
					coverBtnText: '查看详情',
					time: '2025-3-29',
				},
				{
					imgPath: '',
					title: '一般体检',
					status: 0,
					label: ['男', '入职体检', '腹部'],
					lineBtnText: '立即预约',
					coverBtnText: '查看详情',
					time: '2024-8-30',
				},
			]
		}
	},
	computed: {
		filteredInfo(){
			// 获取当前时间
			const now = new Date().getTime()

			// 筛选数据
			return this.setMealInfo.filter(item => {
				// 解析时间字符串
				const bookTime = new Date(item.time);

				//时间范围筛选
				if (this.selectedTimeRange !== '请选择时间范围') {
					const [startDateStr, endDateStr] = this.selectedTimeRange.split('至');
					const startDate = new Date(startDateStr.trim());
					const endDate = new Date(endDateStr.trim());
					return bookTime >= startDate && bookTime <= endDate;
				}
				// 时间筛选
				switch (this.activeDate) {
					case '1m':
					return this.isWithinMonths(bookTime, now, 1);
					case '6m':
					return this.isWithinMonths(bookTime, now, 6);
					case '1y':
					return this.isWithinMonths(bookTime, now, 12);
					case 'all':
					return true;
					default:
					return true;
				}
			}).sort((a, b) => new Date(b.surgeryTime) - new Date(a.surgeryTime)); // 按时间倒序排序
		},
	},
	methods: {
		handleChangeFilterBtn(value) {
			this.activeDate = value;
			this.selectedTimeRange = '请选择时间范围'
		},
		handleChangeTimeRange({ startDate, endDate }) {
			this.selectedTimeRange = `${startDate} 至 ${endDate}`;
			this.activeDate = 'all'
		},
		// 检查日期是否在最近 N 个月内
		isWithinMonths(targetDate, nowDate, months) {
			const pastDate = new Date(nowDate);
			const futureDate = new Date(nowDate);
			pastDate.setMonth(pastDate.getMonth() - months);
			futureDate.setMonth(futureDate.getMonth() + months);
			return targetDate >= pastDate && targetDate <= futureDate;
		},
	}
}
</script>

<style lang='scss' scoped>
.page-container {
	background: linear-gradient(#e0f3ff 0%, #fff 50%);
	min-height: 100vh;
	padding: 0 20rpx 20rpx;
}
</style>